/* eslint-disable @typescript-eslint/no-unused-vars */
<template>
  <div class="line-chart">
    <h4>{{ title }}</h4>
    <div class="chart">
      <chart
        ref="chartRef"
        :option="refChartOption"
        :style="{ height: chartHeight }"
        @zrender:click="renderClickHandle"
        :currentTheme="currentTheme"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, PropType, watch, onMounted } from 'vue';
import { Chart } from '@/components';
export interface TimelineItem {
  [key: string]: string | number;
}
import xiaohai from '@/assets/image/statistics/xiaohai.svg';
import laoren from '@/assets/image/statistics/laoren.svg';
import nanxin from '@/assets/image/statistics/nanxin.svg';
import qingnianren from '@/assets/image/statistics/qingnianren.svg';
import weitianbao from '@/assets/image/statistics/weitianbao.svg';
import zhongnianren from '@/assets/image/statistics/zhongnianren.svg';
import nvxing from '@/assets/image/statistics/nvxing.svg';
export default defineComponent({
  props: {
    data: {
      type: Array as PropType<TimelineItem[]>,
      default: () => [],
    },
    title: {
      type: String,
      default: '',
    },
    fieldNames: {
      type: Object,
      default: () => ({
        name: 'name',
        values: ['value'],
      }),
    },
    height: {
      type: Number,
      default: 300,
    },
    legend: {
      type: Array,
      default: () => {
        return [];
      },
    },
    currentTheme: {
      type: String,
      default: 'dark',
    },
  },
  setup(props, { emit }) {
    const chartRef = ref();
    const chartOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      xAxis: {},
      yAxis: {
        type: 'category',
        data: [] as Array<any>,
        axisLabel: {
          textStyle: {
            width: 70,
            align: 'right',
          },
          formatter: function (value) {
            return `{${
              value == '未成年'
                ? 'img0'
                : value == '青年'
                ? 'img3'
                : value == '中年'
                ? 'img5'
                : value == '老年'
                ? 'img1'
                : value == '未填报'
                ? 'img4'
                : value == '女'
                ? 'img6'
                : 'img2'
            }|}{${
              value == '未成年'
                ? 'value0'
                : value == '青年'
                ? 'value1'
                : value == '中年'
                ? 'value2'
                : value == '老年'
                ? 'value3'
                : value == '未填报'
                ? 'value4'
                : value == '女'
                ? 'value5'
                : 'value6'
            }|${value}}`;
          },
          rich: {
            value0: {
              lineHeight: 30,
              align: 'left',
              color: 'rgba(200,211,35,0.7)',
            },
            value1: {
              lineHeight: 30,
              align: 'left',
              color: 'rgba(228,134,72,0.7)',
            },
            value2: {
              lineHeight: 30,
              align: 'left',
              color: 'rgba(82,135,255,0.7)',
            },
            value3: {
              lineHeight: 30,
              align: 'left',
              color: 'rgba(82,135,255,0.7)',
            },
            value4: {
              lineHeight: 30,
              align: 'left',
              color: 'rgba(151,164,194,0.7)',
            },
            value5: {
              lineHeight: 30,
              align: 'left',
              color: 'rgba(227,89,186,0.7)',
            },
            value6: {
              lineHeight: 30,
              align: 'left',
              color: 'rgba(82,209,255,0.7)',
            },

            img0: {
              height: 25,
              align: 'left',
              backgroundColor: {
                image: xiaohai,
              },
            },
            img1: {
              height: 25,
              align: 'left',
              backgroundColor: {
                image: laoren,
              },
            },
            img2: {
              height: 25,
              align: 'left',
              backgroundColor: {
                image: nanxin,
              },
            },
            img3: {
              height: 25,
              align: 'left',
              backgroundColor: {
                image: qingnianren,
              },
            },
            img4: {
              height: 25,
              align: 'left',
              backgroundColor: {
                image: weitianbao,
              },
            },
            img5: {
              height: 25,
              align: 'left',
              backgroundColor: {
                image: zhongnianren,
              },
            },
            img6: {
              height: 25,
              align: 'left',
              backgroundColor: {
                image: nvxing,
              },
            },
          },
        },
      },
      grid: {
        x: 120,
        y: 15,
        x2: 100,
        y2: 20,
        borderWidth: 1,
      },
      series: [
        {
          type: 'bar',
          barWidth: 20,
          data: [5, 7, 10, 40, 2],
          itemStyle: {
            normal: {
              color: function (params) {
                var colorList = {
                  未成年: 'rgba(200,211,35,0.7)',
                  青年: 'rgba(228,134,72,0.7)',
                  中年: 'rgba(82,135,255,0.7)',
                  老年: 'rgba(82,135,255,0.7)',
                  未填报: 'rgba(151,164,194,0.7)',
                  女: 'rgba(227,89,186,0.7)',
                  男: 'rgba(82,209,255,0.7)',
                };
                return colorList[params.name];
              },
              label: {
                show: true, //是否显示
                position: 'right', //显示位置
                fontSize: '16',
                formatter: function (params) {
                  if (params.value) {
                    if (params.name == '未成年') {
                      return `{color1|${'1-17岁'}}\n{color1|${params.value} (${
                        props.data[params.dataIndex].percent
                      })}`;
                    } else if (params.name == '青年') {
                      return `{color2|${'18-45岁'}}\n{color2|${params.value} (${
                        props.data[params.dataIndex].percent
                      })}`;
                    } else if (params.name == '中年') {
                      return `{color3|${'46-69岁'}}\n{color3|${params.value} (${
                        props.data[params.dataIndex].percent
                      })}`;
                    } else if (params.name == '老年') {
                      return `{color4|${'>69岁'}}\n{color4|${params.value} (${
                        props.data[params.dataIndex].percent
                      })}`;
                    } else if (params.name == '未填报') {
                      return `{color5|${'未填报'}}\n{color5|${params.value} (${
                        props.data[params.dataIndex].percent
                      })}`;
                    } else if (params.name == '男') {
                      return `{color6|${'男'}}\n{color6|${params.value} (${
                        props.data[params.dataIndex].percent
                      })}`;
                    } else if (params.name == '女') {
                      return `{color7|${'女'}}\n{color7|${params.value} (${
                        props.data[params.dataIndex].percent
                      })}`;
                    }
                  }
                },
                rich: {
                  color1: {
                    color: 'rgba(200,211,35,0.7)',
                    fontWeight: '700',
                  },
                  color2: {
                    color: 'rgba(228,134,72,0.7)',
                    fontWeight: '700',
                  },
                  color3: {
                    color: 'rgba(82,135,255,0.7)',
                    fontWeight: '700',
                  },
                  color4: {
                    color: 'rgba(82,135,255,0.7)',
                    fontWeight: '700',
                  },
                  color5: {
                    color: 'rgba(151,164,194,0.7)',
                    fontWeight: '700',
                  },
                  color6: {
                    color: 'rgba(82,209,255,0.7)',
                    fontWeight: '700',
                  },
                  color7: {
                    color: 'rgba(227,89,186,0.7)',
                    fontWeight: '700',
                  },
                },
              },
            },
          },
        },
      ],
    };

    const refChartOption = ref(chartOption);

    const chartHeight = computed(() => `${props.height}px`);

    const setChartOption = (data: any[]) => {
      const xAxis: string[] = [];
      interface SeriesDataMap {
        [key: string]: Array<any>;
      }
      const seriesDataMap: SeriesDataMap = {};
      data.forEach(item => {
        const name = item[props.fieldNames.name].split('（')[0];
        props.fieldNames.values.forEach(value => {
          if (seriesDataMap[value]) {
            seriesDataMap[value].push(item[value]);
          } else {
            seriesDataMap[value] = [item[value]];
          }
        });
        xAxis.push(name);
      });
      refChartOption.value.yAxis.data = xAxis;
      Object.values(seriesDataMap).forEach((o, i) => {
        refChartOption.value.series[i].data = o;
      });
    };
    const renderClickHandle = e => {
      if (e?.topTarget?.type === 'Rect') {
        const index = chartRef.value.getIndexByEventY(e);
        const item = props.data[index];
        emit('zrender:click', item);
      }
    };

    watch(
      () => props.data,
      () => {
        setChartOption(props.data);
      },
    );

    onMounted(() => {
      setChartOption(props.data);
    });
    return {
      chartHeight,
      refChartOption,
      renderClickHandle,
      chartRef,
    };
  },
  components: {
    Chart,
  },
});
</script>

<style lang="less" scoped></style>
